$bg:#f6f6f6;$blue:#0075B8;

/* 页面整体 */
.page{background:$bg;min-height:100vh;padding-bottom:env(safe-area-inset-bottom);}

/* 顶部导航 */
.nav{position:sticky;top:0;z-index:10;background:#fff;padding:calc(var(--status-bar-height,0px)) 24rpx 16rpx;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;border-bottom:1rpx solid rgba(0,0,0,0.04);}
.nav-left{justify-self:start;padding:10rpx;}
.nav-right{justify-self:end;display:flex;gap:20rpx;}
.nav-btn{padding:10rpx;}
.nav-ico{width:36rpx;}
.nav-title{justify-self:center;font-size:36rpx;font-weight:700;color:#222;}

/* 顶部渐变进度区 */
.progress-area{padding:26rpx 24rpx 18rpx;background:linear-gradient(180deg,#EAF5FF 0%,#E6F3FF 16%,#E7F2FF 28%,rgba(0,117,184,0.12) 44%,rgba(0,117,184,0.08) 62%,rgba(0,117,184,0.04) 78%,rgba(0,117,184,0.00) 100%);}
.bar{height:16rpx;background:#dfe3e8;border-radius:999rpx;position:relative;overflow:hidden;box-shadow:inset 0 1rpx 0 rgba(0,0,0,0.04);}
.bar-fill{height:100%;background:$blue;border-radius:999rpx;position:relative;}
.bar-fill.full{width:100%;}
.bar-thumb{position:absolute;right:0;top:50%;transform:translateY(-50%);width:28rpx;height:28rpx;border-radius:50%;background:#fff;border:6rpx solid $blue;box-shadow:0 4rpx 10rpx rgba(0,117,184,0.25);}
.steps{display:flex;justify-content:space-between;margin-top:12rpx;color:#9aa0a6;font-size:26rpx;}
.step{width:50%;text-align:center;}
.step.active{color:#333;font-weight:700;}

/* 内容区 */
.content{padding:0 24rpx 24rpx;}
.label{margin:18rpx 0 10rpx;color:#8a8f98;font-size:26rpx;}
.upload-card{display:flex;justify-content:space-between;align-items:center;padding:15px 24rpx;background:#f3f4f6;border-radius:16rpx;}
.left{width:48%;display:flex;flex-direction:column;gap:8rpx;}
.title{font-size:40rpx;font-weight:800;color:#111;}
.sub{font-size:26rpx;color:#8a8f98;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.preview-img{width:46%;height:200rpx;border-radius:12rpx;background:#e9f5ff;}

/* 间距 */
.spacer{height:36rpx;}
.bottom-gap{height:24rpx;}

/* 底部按钮 */
.cta-wrap{padding:20rpx 30rpx 8rpx;}
.cta{width:100%;height:100rpx;line-height:100rpx;text-align:center;border-radius:999rpx;background:$blue;color:#fff;font-size:34rpx;font-weight:700;}
.cta::after{border:none;}

/* 底部跳过提示 */
.skip{text-align:center;margin-top:14rpx;color:#8a8f98;font-size:26rpx;}
.link{color:$blue;}
